import React, { useEffect } from 'react';
// import data from '@/assets/data/map.json';
import data from '@/assets/data/river/henan_huanghe.json';
import data_qingshui_1 from '@/assets/data/river/qingshui1.json';
import data_qingshui_2 from '@/assets/data/river/qingshui2.json';
import data_qingshui_3 from '@/assets/data/river/qingshui3.json';
import data_qingshui_4 from '@/assets/data/river/qingshui4.json';
import data_luxin_1 from '@/assets/data/river/luxin1.json';
import data_luxin_2 from '@/assets/data/river/luxin2.json';
import Trial_reservoir from '@/assets/data/river/Trial_reservoir.json';
import Houchenlou_reservoir from '@/assets/data/river/Houchenlou_reservoir.json';
import * as echarts from 'echarts';
// import  'babel-loader!echarts/extension/bmap/bmap.js';
import { loadBMap } from '@/assets/js/map';
import styles from './index.less';
import { connect } from 'umi';
// import Chart_Map from '../../assets/data/map/province/henan.json';
import Chart_Map from '../../assets/data/map/city/luyi_dancheng.json'
// import Chart_Map from '../../assets/data/map/city/shangqiu_zhoukou.json';
import imgdot from "@/assets/data/img/dot.png"
import { MapChartFull_Data_Info } from '@/assets/data/mock_mapdata';



//不同warning颜色
const Alarm_color = ['#7DCDA7', '#84D7AE', '#40B6FF', '#FFD700', '#FFA500', '#FF4043']

function MapChartFull() {
  useEffect(() => {
    const chartDom = document.getElementById('ech');
    const myChart = echarts.init(chartDom);
    window.addEventListener('resize', function () {
      myChart.resize();
    });


    //河流线s
    const lines = data.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_qingshui_1 = data_qingshui_1.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_qingshui_2 = data_qingshui_2.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_qingshui_3 = data_qingshui_3.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_qingshui_4 = data_qingshui_4.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_luxin_1 = data_luxin_1.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_luxin_2 = data_luxin_2.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_Trial_reservoir = Trial_reservoir.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });
    const lines_Houchenlou_reservoir = Houchenlou_reservoir.map(function (track) {
      return {
        coords: track.map(function (seg, idx) {
          return seg.coord;
        }),
      };
    });

    echarts.registerMap('Chart_Map', Chart_Map);
    let option = {
      tooltip: {
        show: true,
      },
      legend: {
        x: '90%',
        top: '5%',
        orient: 'vertical',
        textStyle: {
          color: '#ffffff'
        },
        backgroundColor: '#1F3B5C',
        opacity: 0.1,
        selected: {
          '中转站': false,
        },
        data: ['5级污染', '4级污染', '3级污染', '2级污染', '1级污染', '清水河段', '鹿辛段', "桩"]
      },
      geo: {
        type: 'map',
        map: 'Chart_Map',
        nameMap: '河南',
        zoom: 3.5,
        center: [115.40904424, 33.77267236],
        roam: true,
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          normal: {
            // areaColor: 'rgba(42, 114, 235,0.9)', //地图区域的颜色
            // areaColor: 'rgba(25, 118, 188,0.8)', //地图区域的颜色
            areaColor: 'rgba(16, 33, 62,0.8)', //地图区域的颜色
            borderWidth: 0.3, //描边线宽。为 0 时无描边
            borderColor: '#d1d1d1', //地图每一模块描边颜色
            shadowColor: 'rgba(0, 59, 81,0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 6,
          },
          tooltip: {
            show: false,
          },
          emphasis: {
            tooltip: {
              show: false,
            },
            areaColor: 'rgba(16, 33, 62,0.8)',
            disabled: true,
            borderWidth: 0,
            // color: '#001529',
            color: '#fff',
            label: {
              show: true,
              color: '#fff',
            },
          },
        },
      },
      series: [
        {
          type: 'lines',
          name: '清水河段',
          data: lines_qingshui_1,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#84D7AE',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '清水河段',
          data: lines_qingshui_2,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#FFD700',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '清水河段',
          data: lines_qingshui_3,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#40b6ff',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '清水河段',
          data: lines_qingshui_4,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#FFA500',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '鹿辛段',
          data: lines_luxin_1,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#FFD700',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '鹿辛段',
          data: lines_luxin_2,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: '#ff4043',
              width: 5, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: true,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 9, //图标大小
          },
        },
        {
          type: 'lines',
          name: '试量调蓄水库',
          data: lines_Trial_reservoir,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: 'rgba(103,142,242, 1)',
              width: 3, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: false,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 10, //图标大小
          },
        },
        {
          type: 'lines',
          name: '后陈楼调蓄水库',
          data: lines_Houchenlou_reservoir,
          coordinateSystem: 'geo',
          polyline: true, //是否是多段线路
          lineStyle: {
            normal: {
              color: 'rgba(103,142,242, 1)',
              width: 3, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowColor: 'rgba(76, 188, 249, 0.2)',
              shadowBlur: 10,
            },
          },
          effect: {
            show: false,
            period: 6, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 4, //图标大小
          },
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          itemStyle: {
            color: '#00FFF6',
          },
          symbol: 'image://' + require('@/assets/data/img/reservoir.png'),
          symbolSize: [22, 22],
          symbolOffset: [0, -10],
          z: 999,
          data: [
            [115.58939785, 33.66922464],
            [115.46360493, 33.73618908],
            [115.24535626, 33.87085873],
            // [115.34531683, 33.87519242],
          ],
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          itemStyle: {
            color: '#00FFF6',
          },
          symbol: 'image://' + require('@/assets/data/img/bridge.png'),
          symbolSize: [22, 22],
          symbolOffset: [0, -10],
          z: 999,
          data: [
            [115.50170571, 33.73108546],
            [115.45786232, 33.75625708],
            [115.33399791, 33.79696521],
            [115.2475664, 33.83850281],
            [115.34264132, 33.87529597],
            [115.40566251, 33.87045063],
          ],
        },

      ],
    };



    const { WaterQ_warn, pillar_Info } = MapChartFull_Data_Info

    //读取动态数据动态添加series

    //start
    // 桩状体的主干
    const p_zg =
    {
      type: 'lines',
      name: '桩',
      zlevel: 2,
      effect: {
        show: false,
        // period: 4, //箭头指向速度，值越小速度越快
        // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        // symbol: 'arrow', //箭头图标
        // symbol: imgDatUrl,
        symbolSize: 2 // 图标大小
      },
      lineStyle: {
        width: 15, // 尾迹线条宽度
        color: 'rgb(22,255,255, .6)',
        opacity: 1, // 尾迹线条透明度
        curveness: 0 // 尾迹线条曲直度
      },
      silent: true,
      data: lineData(pillar_Info)
    }

    // 桩状体的顶部
    const p_Tb = {
      type: 'scatter',
      name: '桩',
      coordinateSystem: 'geo',
      geoIndex: 0,
      zlevel: 5,
      label: {
        show: true,
        formatter: function (params) {

          // return `${params.data}`
          return ''
        },
        position: "top"
      },
      symbol: 'circle',
      symbolSize: [15, 10],
      itemStyle: {
        color: 'rgb(22,255,255, 1)',
        opacity: 1
      },
      silent: true,
      data: scatterData(pillar_Info)
    }
    // 桩状体的底部
    const p_Lb = {
      type: 'scatter',
      name: '桩',
      coordinateSystem: 'geo',
      geoIndex: 0,
      zlevel: 4,
      label: {
        // 这儿是处理的
        formatter: '{b}',
        position: 'bottom',
        color: '#fff',
        fontSize: 12,
        distance: 10,
        show: true
      },
      symbol: 'circle',
      symbolSize: [15, 10],
      itemStyle: {
        // color: '#F7AF21',
        color: 'rgb(22,255,255, 1)',
        opacity: 1
      },
      silent: true,
      data: scatterData2(pillar_Info)
    }
    // 底部外框
    const p_EXb = {
      type: 'scatter',
      name: '桩',
      coordinateSystem: 'geo',
      geoIndex: 0,
      zlevel: 4,
      label: {
        show: false
      },
      symbol: 'circle',
      symbolSize: [40, 20],
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色
            },
            {
              offset: .75, color: 'rgb(22,255,255, 0)' // 100% 处的颜色
            },
            {
              offset: .751, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
            },
            {
              offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },

        opacity: 1
      },
      silent: true,
      data: scatterData2(pillar_Info)
    }


    option.series.push(p_zg, p_Tb, p_Lb, p_EXb)


    //读取动态数据动态添加series的报警级别
    WaterQ_warn.map((item, index) => {
      //污染点
      const series_Item = {
        type: 'effectScatter',
        name: item.name,
        coordinateSystem: 'geo',
        zlevel: 10,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 8
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) { //圆环显示文字
              return params.data.name;
            },
            fontSize: 12,
            color: Alarm_color[item.Alarm_Levle] //字体颜色
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (value, params) {
          return 2 + (params.data.size * 2); //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: Alarm_color[item.Alarm_Levle] //圆环颜色
          }
        },
        data: item.Alarm_Info,//污染坐标信息
      }
      option.series.push(series_Item)
    })



    myChart.setOption(option);
  }, []);



  // 动态计算桩形图的高度（定一个max）
  function lineMaxHeight(pillar_Info = []) {
    const array = pillar_Info.map(item => item.value)
    const maxValue = _.max(array)
    return 0.012 / maxValue
  }
  // 桩状体的主干
  function lineData(pillar_Info) {
    return pillar_Info.map((item) => {
      return {
        coords: [item.coordinates, [item.coordinates[0], item.coordinates[1] + item.value * lineMaxHeight(pillar_Info)]]
      }
    })

  }
  // 桩状体的顶部
  function scatterData(pillar_Info = []) {
    return pillar_Info.map((item) => {
      return [item.coordinates[0], item.coordinates[1] * 1.0 + item.value * lineMaxHeight(pillar_Info)]
    })
  }
  // 桩状体的底部
  function scatterData2(pillar_Info = []) {
    return pillar_Info.map((item) => {
      return {
        name: item.name,
        value: item.coordinates
      }
    })
  }

  return (
    <div
      id="ech"
      style={{
        border: '2px solid rgba(36, 81, 156, 0.8)',
        background: 'rgba(8, 28, 49, 0.4)',
        position: 'relative',
        width: '100%',
        height: '100%',
      }}
    ></div>
  );
}
export default connect(
  (global) => ({
    IsLoadMap: global.IsLoadMap,
  }),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(MapChartFull);
